// 第一块
let newsPicture = [
  {
    picture: 'https://overwatch.nosdn.127.net/a/images/2022/10/25/aa834702e62c3cc74aae9eaa7c9c3621.jpg',
    title: '与我们共赴暗影__《守望先锋》“归来”万圣夜惊魂再临!'
  },
  {
    picture: 'https://overwatch.nosdn.127.net/a/images/2022/10/4/bc1d71762bbfe6b2b51ab886cd19ce21.jpg',
    title: '第一赛季 高级战令'
  },
  {
    picture: 'https://overwatch.nosdn.127.net/a/images/2022/10/4/bc46efd9ed48a2602c6f82b6f998a644.jpg',
    title: '监测站礼包 现已上线'
  },
  {
    picture: 'https://overwatch.nosdn.127.net/a/images/2022/9/29/b339b4fbead47cdee7c5041dc9ad85dd.jpg',
    title: '介绍：战令、商城、英雄解锁与其他内容'
  },
  {
    picture: 'https://overwatch.nosdn.127.net/a/images/2022/10/4/2c315938b17535c656baa13c50692573.jpg',
    title: '系统初始化！竞技比赛更新'
  },
  {
    picture: 'https://overwatch.nosdn.127.net/a/images/2022/10/4/0df666816e92943fa9d247891c08f0d7.jpg',
    title: '《守望先锋》 “归来”正式上线免费开玩'
  }
]
const innerOne = document.querySelector('.news-panel .inner')
const newbox = newsPicture.map((item) => {
  return `
      <div class="grid-item">
        <div class="box">
          <img src="${item.picture}" alt="">
          <div class="content">
            <div class="title">
            ${item.title}
            </div>
          </div>
        </div>
      </div>
  `
}).join('')
innerOne.innerHTML = newbox
document.querySelector('.grid-item:first-child').classList.add('lg')
document.querySelector('.grid-item:last-child').classList.add('lg')
// 第二块
let newsBlog = [
  {
    img: 'https://overwatch.nosdn.127.net/a/images/2022/11/4/53f993fa61e998c3651798aff4c09bc7.png',
    title: '拉玛刹公布——《守望先锋联赛》总决赛',
    summary: '拉玛刹将在12月7日开启的《守望先锋》“归来”第2赛季中夺取自己的一席之地!',
    date: '2022-11-05'
  },
  {
    img: 'https://overwatch.nosdn.127.net/a/images/2022/11/3/b295eeddbdc7312b5dc4bf0e936d988d.jpg',
    title: '2022暴雪游戏高校主持人大赛复赛投票11月4日-13日开启',
    summary: '11月4日起至13日，所有暴雪玩家都可以通过活动页面为20名来自全国各地的主持人新星进行投票，最终投票排名与面试分数将决定进入决赛的名额',
    date: '2022-11-04'
  },
  {
    img: 'https://overwatch.nosdn.127.net/a/images/2022/11/1/5dddcf211fd3c6c4846bb87d6d13a3d1.jpg',
    title: '《守望先锋》“归来”雾子动画短片中文配音幕后花絮',
    summary: '让我们一起看看在中文版本的配音过程中，配音演员和暴雪本地化团队是怎样打磨出这样一部亲情满溢又热血沸腾的作品吧。',
    date: '2022-11-02'
  },
  {
    img: 'https://overwatch.nosdn.127.net/a/images/2022/10/28/47bcf0d82e941dc2592114b526e60168.jpg',
    title: '英雄崛起《守望先锋联赛》2022赛季季后赛暨总决赛火热开战',
    summary: '北京时间10月31日早晨5点30分，季后赛首轮比赛正式开打!',
    date: '2022-10-30'
  },
  {
    img: 'https://overwatch.nosdn.127.net/a/images/2022/10/28/92fb662f322aeac584dd34156e3d8399.png',
    title: '守望先锋|哗哩哗哩专属个性装扮已上线!',
    summary: '各位英雄集合啦!《守望先锋》专属B站个性装扮来啦~限时折扣现已开启!',
    date: '2022-10-29'
  },
  {
    img: 'https://overwatch.nosdn.127.net/a/images/2022/10/28/a51f408834b8cc431d16f8bc25991b6a.jpg',
    title: '《守望先锋》“归来”万圣夜惊魂社区活动推荐',
    summary: '《守望先锋》“归来”万圣夜惊魂活动现已开启，各大媒体社区平台准备了丰富的社区活动，快来赢取丰厚的活动奖励吧!!',
    date: '2022-10-28'
  },
  {
    img: 'https://overwatch.nosdn.127.net/a/images/2022/10/27/e0b17460adffe45d227e1f6057b23059.jpg',
    title: '杨和苏早安IcePaper重磅联手打造《守望先锋》“归来”高燃战歌《We Back》',
    summary: '先锋音乐人杨和苏KeyNG、早安、lce Paper首度合作，为次世代团队动作游戏《守望先锋》“归来”度身打造的高燃战歌《We Back》今日正式上线!',
    date: '发布日期:2022-10-28'
  },
  {
    img: 'https://overwatch.nosdn.127.net/a/images/2022/10/26/7c47f5c720bf6866c3a23f04643b1332.jpg',
    title: '【社区推荐】揭秘“灵利女巫雾子”皮肤里竟然藏着一首诗?',
    summary: '雾子的新形象,全新上架的“灵利女巫雾子”皮肤本身，竟然也埋藏了神秘的彩蛋!',
    date: '发布日期:2022-10-26'
  },
  {
    img: 'https://overwatch.nosdn.127.net/a/images/2022/10/25/de1add2a5336e6f1693ff819f343338b.jpeg',
    title: '趣玩游戏年末狂欢，守望先锋城市快闪show11月5日开启',
    summary: '线下打卡顶级电竞体验，快闪大SHOW年末游戏狂欢!11月5日《守望先锋》城市快闪SHOW活动开启。',
    date: '发布日期:2022-10-25'
  },
  {
    img: 'https://overwatch.nosdn.127.net/a/images/2022/10/24/eb099657a8af6411fcdb4242ab7d577d.png',
    title: '与我们共赴暗影——《守望先锋》“归来”万圣夜惊魂再临!',
    summary: '又到了一年之中恐惧横行的日子——万圣夜惊魂再度降临《守望先锋》。准备迎接震撼的惊喜吧，弗兰狂斯鼠博士的歹毒传奇将会翻开崭新的篇章!',
    date: '发布日期:2022-10-25'
  },
  {
    img: 'https://overwatch.nosdn.127.net/a/images/2022/10/24/dbce87edfc074d857e602ba24d473dff.jpg',
    title: '2022暴雪游戏高校主持人大赛复赛名单公布',
    summary: '2022暴雪游戏高校主持人大赛复赛名单已经出炉，让我们一起看看他们都是谁吧!',
    date: '发布日期:2022-10-24'
  },
  {
    img: 'https://overwatch.nosdn.127.net/a/images/2022/10/21/191e333c02bb9d866fb416720310050e.png',
    title: '万圣夜惊魂:阿德勒斯布鲁恩领主桌上的文书',
    summary: '随着疯博士复仇的纪念日一天天临近，那份无比熟悉的恐惧感又一次占据了我的心。',
    date: '发布日期:2022-10-21'
  },
  {
    img: 'https://overwatch.nosdn.127.net/a/images/2022/10/11/79c9d168bfaf16112bdb33620c164136.png',
    title: '航向埃斯佩兰萨:传统、光鲜与希望之上的葡萄牙城市',
    summary: '《守望先锋》最新机动推进地图带你巡游葡萄牙的美丽城市:埃斯佩兰萨。',
    date: '发布日期:2022-10-19'
  },
  {
    img: 'https://overwatch.nosdn.127.net/a/images/2022/10/19/2861dc04c984f55072ea581ee249d3f0.png',
    title: '《守望先锋》“归来”双倍经验活动本周末开启10月26日登录免费领皮肤和吊坠',
    summary: '《守望先锋》“归来”双倍经验周末活动即将到来!',
    date: '发布日期:2022-10-19'
  },
  {
    img: 'https://overwatch.nosdn.127.net/a/images/2022/10/25/de1add2a5336e6f1693ff819f343338b.jpeg',
    title: '《守望先锋》“归来”开发者博文:上线之后的游戏、地图与竞技更新',
    summary: '我们今天会回顾《守望先锋》全新篇章的第一周，和大家分享团队目前对英雄平衡与游玩体验的想法。',
    date: '发布日期:2022-10-14'
  },
  {
    img: 'https://overwatch.nosdn.127.net/a/images/2022/10/24/eb099657a8af6411fcdb4242ab7d577d.png',
    title: '与我们《守望先锋》“归来”近期问题说明、道歉补偿与后续活动公告',
    summary: '三个双倍经验周末即将到来，登录免费领取传说皮肤和吊坠。',
    date: '发布日期:2022-10-12'
  },
  {
    img: 'https://overwatch.nosdn.127.net/a/images/2022/10/24/dbce87edfc074d857e602ba24d473dff.jpg',
    title: '观看《守望先锋联赛》季后赛资格附加赛，赢取“查莉娅”联赛皮肤及联赛代币',
    summary: '《守望先锋联赛》东部赛区常规赛阶段已经全部结束，本周末东部赛区就将迎来残酷激烈的季后赛资格附加赛。',
    date: '发布日期:2022-10-11'
  },
  {
    img: '	https://overwatch.nosdn.127.net/a/images/2022/3/10/4994674660794fdd5bbf5419fbda2476.jpg',
    title: '《守望先锋》“归来”上线状态更新————2022年10月8日',
    summary: '我们已经在《守望先锋》“归来”上线后的许多问题上取得了进展，在此向大家介绍我们已经采取的措施、已经出现并被部分解决的问题，以及未来的计划。',
    date: '发布日期:2022-10-08'
  }
]
const list = document.querySelector('.blog-list')
const btn = document.querySelector('.blog-btn')
// 页面初始化显示六条数据
const newList = newsBlog.map((item, index) => {
  if (index <= 5) {
    // console.log(item)
    return `
        <li class="blog-info ">
           <a href="" class="blog-a">
           <div class="blog-img">
           <div class="imgbox">
             <img src="${item.img}" alt="">
           </div>
         </div>
         <div class="blog-right">
            <div class="title">
              <h6>${item.title}</h6>
            </div>
            <div class="summary">${item.summary}</div>
            <div class="sub-date">${item.date}</div>
         </div>
           </a>
         </li>
  `
  }
}).join('')
list.innerHTML = newList
// 点击一次按钮，增加六条数据
let i = 6
btn.addEventListener('click', function () {
  // 每次增加六个
  let count = i + 6
  for (i; i < newsBlog.length && i < count; i++) {
    console.log(count)
    const li = document.createElement('li')
    list.appendChild(li)
    li.innerHTML = `
      <li class="blog-info ">
      <a href="" class="blog-a">
      <div class="blog-img">
        <div class="imgbox">
          <img src="${newsBlog[i].img}" alt="">
        </div>
      </div>
      <div class="blog-right">
         <div class="title">
           <h6>${newsBlog[i].title}</h6>
         </div>
         <div class="summary">${newsBlog[i].summary}</div>
         <div class="sub-date">${newsBlog[i].date}</div>
      </div>
      </a>
   </li>
      `
  }
})


